@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800&subset=latin,cyrillic-ext,greek-ext,vietnamese);
/* GENERAL */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
	text-rendering: optimizeLegibility;
	background-color:#212121;
	color: #666666;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
}
a:hover, a:focus {
	text-decoration: none;
}
p {
	color: #000;
	font-size: 12px;
}
.rp {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.b {
	border: 1px solid red;
}
.btn-function {
	margin-left: 10px;
}
.btn-function-xs {
	margin-left: 18px;
}
.image {
	max-height: 50%;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}
/* fix for bootstrap hidden and visible */
span.hidden-xs, span.hidden-sm, span.hidden-md, span.hidden-lg {
	display: inline;
}
.loader {
	background: none;
}
/* PANEL */
.panel {
	border-radius: 5px;
	background-color: #212121;
	border: 0 !important;
}
.panel .panel-heading {
	position: relative;
	background-color: #757575;
	height: 60px;
	margin-right: 10px;
	max-width: 100%; 
}

/* TABLE */
.table {
	background-color: #fff;
}
.table td {
	border-right: 0 !important;
}
.table td a {
	color: #000;
	font-style: bold !important;
}
table-overview th {
	text-align: center;
}
table-overviews tbody {
	text-align: center;
}
.table-responsive::-webkit-scrollbar {
	background-color:  transparent;
	height: 5px;
	-webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar-thumb {
	background-color: #111111;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(,0,0,0.9); 
}
.table thead td {
	font-weight: bold;
}
.table thead > tr > td, .table tbody > tr > td {
	vertical-align: middle;
}
.table a.asc:after {
	content: " \f107";
	font-family: FontAwesome;
	font-size: 14px;
}
.table a.desc:after {
	content: " \f106";
	font-family: FontAwesome;
	font-size: 14px;
}
.table thead td span[data-toggle="tooltip"]:after, label.control-label span:after {
	font-family: FontAwesome;
	color: #1E91CF;
	content: "\f059";
	margin-left: 4px;
}

/* OVERVIEW */
.panel-overview {
	border-radius: 0 !important;
}
.more {
	font-size: 8px !important;
	color: #e0e0e0;
	padding-right: 14px;
	
}
a:hover ~.more {
	color: #000 !important;
}
.widgets {
	margin-bottom: 20px;
}

/* BREADCRUMBS */
.breadcrumb {
	display: inline-block;
	background: none;
	margin: 0;
	padding: 0 10px;
}
.breadcrumb li a {
	color: #999999;
	font-size: 11px;
	padding: 0px;
	margin: 0px;	
}
.breadcrumb li:last-child a {
	color: #1e91cf;
}
.breadcrumb li a:hover {
	text-decoration: none;
}
.breadcrumb li + li:before {
	content: "/";
	font-family: FontAwesome;
	color: #BBBBBB;
	padding: 0 5px;	
}

/* PAGE HEADER & CONTENT */
.page-header {
	vertical-align: middle;
	margin: 10px 0 0 5px;
	padding: 0;
	border-bottom: none;
}
.page-header h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-size: 30px;
	color: #fff;
	display: inline-block;
	margin-bottom: 15px;
}
.page-content {
	vertical-align: middle;
	margin: 15px 0;
	border-bottom: none;
}

/* MAIN CONTAINER */
#container {
	min-height: 100%;
	width: 100%;
	position: relative;
}
.container-fluid {
	padding-left: 20px !important;
	padding-right: 20px !important;
}

/* HEADER */
#header {
	height: 73px;
	background: #424242;
	margin: 0 !important;
	padding: 0 !important;
	position: fixed;
	width: 100% !important;
	top: 0 !important;
}
#option {
	margin: 0 !important;
	padding: 0 !important;
}

/* VERTICAL LEFT NAVBAR */
#column-left {
	width: 68px;
	min-height: 100% !important;
	background-color: #009688;
	position: fixed;
	top: 0px;
	padding-top: 68px;
	z-index: 10;
	transition: all 0.3s;
	bottom: 0px;
}
#column-left::-webkit-scrollbar {
	background-color:  #018579;
	width: 8px;
	-webkit-appearance: none;
}
#column-left::-webkit-scrollbar-thumb {
	background-color: #111111;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(,0,0,0.9); 
}
#column-left.active {
	width: 235px;
	display: block;
}
#column-left.active {
	width: 235px;
}
#column-left.active #menu li i {
	font-size: 14px;
}
#column-left.active #menu > li > a > span {
	display: inline;
}
#column-left.active #menu > li > ul {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	visibility: visible;
}
#column-left.active #profile {
	display: block;
	padding: 10px 15px 34px 0px;
	overflow: auto;
	border-bottom: 1px dotted #fff;
}
#column-left + #content{
	margin-left: 68px;
}
#column-left + #content + #footer {
	margin: 0px !important;
}

/* PROFILE */
#profile {
	display: none;
	margin-top: 24px;
}
#profile div {
	float: center;
	color: #C4C4C4;
}
#profile div + div {
	margin-left: 15px;
}
#profile h4 {
	margin-top: 6px;
	font-family: 'Open Sans', sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #FFF;
	margin-bottom: 0;
	float: center;
}
#profile img {
	padding-left: 90px;
}

/* NAVBAR */
ul#menu > li {
	margin: 0px !important;
	padding: 0px !important;
}
#navbtn {
	margin: 0 !important;
	height: 73px;
}
#navbtn i {
	float: center;
	margin-top: 20px;
}
ul#menu #navbtn:hover {
	background-color: #4db6ac;
	color: #4db6ac;
}
.head {
	display: table !important;
}
.head a {
	display: table-cell !important;
	vertical-align: middle !important;
}
.h {
	width: 68px;
	margin: 0 !important;
	padding: 0 !important;
}
.h a {
	cursor: pointer;
}
.f {
	margin: 0 !important;
	padding: 0 !important;
	position: fixed:
}
.logo {
	padding-left: 10px;
	padding-top: 5px;
}
.logo:hover {
	background-color: #424242;
}

/* NAVBAR*/
.navbtn {
	width: 68px;
	height: 73px;
	background: #017267;
}
.navbtn i {
	font-size: 24px;
	color: #fff;
	margin-top: 28px;
	margin-left: 23px;
}
.navbtn i:active {
	-webkit-animation: rubberBand 1s;
	animation: rubberBand 1s;
}
.navbtn:hover {
	background-color: #009688;
}
.nav:active {
	background-color: #424242;
}
.nav > li.disabled > a {
	color: #999;
}
.nav > li.disabled > a:hover, .nav > li.disabled > a:focus {
	color: #999;
}
.nav li a:hover {
	background-color: #757575;
	color: #424242; 
}
.nav i:hover {
	color: #424242; 
}
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
	background-color: #757575 !important;
	font-color: #fff;
	color: #fff;
}

/* TOP MENU ICONS */
.label-link {
	width: 68px;
	height: 73px;
	background: #424242;
	font-size: 14px;
	font-style: bold;
}
.label-link i {
	font-size: 24px;
	color: #fff;
	margin-top: 15px;
	margin-left: 8px;

}
.lbl {
	text-shadow: none;
	padding: 1px 4px;
	position: absolute;
	top: 20px;
	left: 8px;
	font-size: 10px;
	color: #fff
}

.childlbl
{
	text-shadow: none;
	padding: 4px 4px;
	font-size: 10px;
	margin-left: 100px;
	display: inline-block;
	color: #fff;
	font-weight: 400;
}

.out
{
	width: 105px;
	height: 73px;
	background: #424242;
	color: #fff;
	font-size: 14px;
	font-style: bold;
}

.out i
{
	font-size: 24px;
	color: #fff;
	margin-top: 15px;
	margin-top: 15px;
}

/* NAVBAR MOBILE VIEW MAX WIDTH 767PX */
@media (max-width: 767px) {
	/* PROFILE */
	#profile {
		display: none;
		margin-top: 12px;
	}
	#profile div {
		float: center;
		color: #C4C4C4;
	}
	#profile div + div {
		margin-left: 7px;
	}
	#profile h4 {
		margin-top: 3px;
		font-family: 'Open Sans', sans-serif;
		font-size: 18px;
		font-weight: 400;
		color: #FFF;
		margin-bottom: 0;
		float: center;
	}
	#profile img {
		padding-left: 98px;
	}

	/* VERTICAL LEFT NAVBAR */
	#column-left {
		overflow: hidden;
		display: none;	
		max-height: 100%;
		text-align: center;
	}
	.icon-label {
		margin-left: 5px !important;
	}
	#column-left.active + #content {
		position: relative;
	}
	#column-left.active + #content + #footer {
		position: relative;
	}
	#column-left.active #profile {
		display: block;
		padding: 5px 7px 17px 0px;
		overflow: auto;
		border-bottom: 1px dotted #fff;
	}
	
	/* VERTICAL RIGHT NAVBAR */
	#column-right {
		width: 100% !important;
		min-height: 100% !important;
		background-color: #009688;
		position: fixed;
		top: 0px;
		padding-top: 68px;
		z-index: 10;
		transition: all 0.3s;
		bottom: 0;
		margin: 0 !important;
		display: none;
		text-align: center;
	}
	#column-right.active {
		width: 100% !important;
		display: block;
		min-height: 100%;
	}
	#column-right.active + #content {
		position: relative;
		margin: 0 !important;
	}
	#column-right.active + #content + #footer {
		position: relative;
		display: none;
		margin: 0 !important;
	}
}

/* MAIN CONTENT */
#content {
	padding-bottom: 40px;
	transition: all 0.3s;
	padding-top: 73px;
}
#column-left + #content {
	margin-left: 50px;
}
#column-left + #content + #footer {
	margin-left: 50px;
}

/* CONTENT MOBILE VIEW MAX WIDTH 767PX */
@media (max-width: 767px) {
	#content {
		margin-left: 4px !important; 
		padding-left: 0;
	}

	/*CONTENT COLUMN*/ 
	.c_column_1 {
		text-align: center;
	}
	.c_btn { 
		float: center !important; 
		text-align: center;
		margin-top: 8px;
	}
}

/* MENU */
#menu, #menu ul, #menu li {
	padding: 0;
	margin: 0;
	list-style: none;
}
#menu {
	margin-bottom: 25px;
}
#menu > li {
	position: relative;
}
#menu li a {
	text-decoration: none;
	display: block;
	padding: 10px;
	cursor: pointer;
	font-color: #fff
}
#menu li a i {
	font-size: 24px !important;
	color: #fff;
}
#menu > li > a {
	color: #C4C4C4;
	font-size: 14px;	
	padding-left: 20px;
}
#menu > li > a:hover {
	background-color: #444444;
}
#menu > li > a > span {
	display: none;
	margin-left: 14px;
	color: #fff;
}
#menu li li a {
	color: #9d9d9d;
}
#menu li li a:hover {
	color: #FFFFFF;
	background-color: #009688;
}
#menu li li a:before {
	content: "\f101";
	font-size: 14px;
	font-family: FontAwesome;
	margin-left: 10px;
	margin-right: 10px;
	transition: margin ease 0.5s;	
}
#menu li li a:hover:before {
	margin-right: 20px;
}
#menu > li.active > a {
	color: #DDDDDD;
	background: #009688;
}
#menu li.active li a {
	color: #C4C4C4;
}
#menu li li.active > a:last-child {
	color: #FFFFFF;
}
#menu li li.active a:last-child:before {
	margin-left: 20px;
	margin-right: 10px;
}
#menu > li > ul {
	position: absolute;
	left: 68px;
	top: 28px;
	width: 210px;
	background-color: #424242;
	visibility: hidden;
}
#menu li ul {
	overflow: hidden;
}
#menu > li:hover > ul {
	visibility: visible;
}
#menu li li a.parent:after, #column-left.active #menu > li a.parent:after {
	font-family: FontAwesome;
	content: "\f105";
	float: right;
	margin-right: 8px;
}
#menu li li.open > a.parent:after, #column-left.active #menu > li.open > a.parent:after {
	font-family: FontAwesome;
	content: "\f107";
	float: right;
	margin-right: 8px;
}
#menu li ul a {
	padding-left: 20px;
}
#menu li li ul a {
	padding-left: 40px;
}
#menu li li li ul a {
	padding-left: 60px;
}
#menu li li li li ul a {
	padding-left: 80px;
}

/* ACTIVE MENU DESKTOP VIEW MIN-WIDTH 768PX */
@media (min-width: 768px) {
	#column-left.active {
		overflow: auto;
	}
	#column-left.active + #content {
		margin-left: 235px;
	}
	#column-left.active + #content + #footer {
		margin-left: 235px;
	}
}

/* ACTIVE MENU MOBILE VIEW MAX-WIDTH 767PX */
@media (max-width: 767px) {
	#column-left.active {
		width: 100% !important;
	}
	#column-left.active + #content {
		position: relative;
	}
	#column-left.active + #content + .push + #footer {
		position: relative;
	}
}

/* ACTIVE MENU */
#column-left.active {
	width: 235px;
}
#column-left.active #menu li i {
	font-size: 14px;
}
#column-left.active #menu > li > a > span {
	display: inline;
}
#column-left.active #menu > li > ul {
	position: relative;
	left: auto;
	top: auto;
	width: auto;
	visibility: visible;
}

/* FORM FILTER */
#form-filter {
	width: 100% !important;
	font-size: 11px;
	overflow: hidden;
}
#form-filter label,
#form-filter p,
#form-filter strong {
	font-size: 12px;
	color: #ccc;
}
#form-filter .form-control {
	margin-bottom: 5px;
}
#form-filter > .row {
	margin: 0 5px;
	padding: 0;
}
#form-filter .filter-form-group {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 250px;
}
#form-filter .filter-form-group::-webkit-scrollbar {
	background-color: #212121;
	width: 10px;
}
#form-filter .filter-form-group::-webkit-scrollbar-thumb {
	background-color: #111111;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(,0,0,0.9); 
}
#form-filter .filter-btn-row {
	margin: 5px 10px 10px 10px;
}
a#filter {
	border: none;
	background: #009688;
	color: #fff;
}
a#filter:hover {
	background: #4db6ac;
}
#form-filter .filter-btn-row .btn {
	border: none;
	padding-top: 10px;
	padding-bottom: 10px;
	box-shadow: inset -1px -1px 1px 1px #000;
}

/* FORM GENERAL */
.form-control {
	padding: 2px 10px;
}
div.required .control-label:not(span):before, td.required:before {
	content: '* ';
	color: #F00;
	font-weight: bold;
}
fieldset legend {
	padding-bottom: 5px;	
}
input[type="radio"], input[type="checkbox"] {
	margin: 2px 0 0;
}
.radio, .checkbox {
	min-height: 18px;
}
input[type="radio"], .radio input[type="radio"], .radio-inline input[type="radio"], input[type="checkbox"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
	position: relative;
	width: 13px;
	width: 16px \0;
	height: 13px;
	height: 16px \0;
	/*-webkit-appearance: none; */
	background: white;
	border: 1px solid #dcdcdc;
	border: 1px solid transparent \0;
	border-radius: 1px;
}
input[type="radio"]:focus, .radio input[type="radio"]:focus, .radio-inline input[type="radio"]:focus, input[type="checkbox"]:focus, .checkbox input[type="checkbox"]:focus, .checkbox-inline input[type="checkbox"]:focus {
	border-color: #4d90fe;
	outline: 0;
}
input[type="radio"]:active, .radio input[type="radio"]:active, .radio-inline input[type="radio"]:active, input[type="checkbox"]:active, .checkbox input[type="checkbox"]:active, .checkbox-inline input[type="checkbox"]:active {
	background-color: #ebebeb;
	border-color: #c6c6c6;
}
input[type="radio"]:checked, .radio input[type="radio"]:checked, .radio-inline input[type="radio"]:checked, input[type="checkbox"]:checked, .checkbox input[type="checkbox"]:checked, .checkbox-inline input[type="checkbox"]:checked {
	background: #fff;
}
input[type="checkbox"]:hover, .checkbox input[type="checkbox"]:hover, .checkbox-inline input[type="checkbox"]:hover {
	border-color: #c6c6c6;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
	-webkit-box-shadow: none \9;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
	box-shadow: none \9;
}
input[type="checkbox"]:checked::after, .checkbox input[type="checkbox"]:checked::after, .checkbox-inline input[type="checkbox"]:checked::after {
	position: absolute;
	top: -6px;
	left: -5px;
	display: block;
	content: url('../image/checkmark.png');
}

/* FORM CONTAINER */
#form-container {
	overflow: hidden;
	display: none;
	z-index: 10;
	transition: all 0.3s;
	background-color: fff;
	margin: 0 !important;
	background-color: #fff;
	padding: 10px;
	float: right;
	width: 0%;
	-webkit-animation-delay: 1s;
}
#form-container.active {
	margin: 0 !important;
	width: 90%; /* Changed value from 100% to 90% to prevent overlaying form - Geoffrey - 03/11/2015 */
	display: block;
}
#form-container-2 {
	overflow: hidden;
	display: none;
	z-index: 10;
	transition: all 0.3s;
	margin: 0 !important;
	table-collapse: collapse;
}
#form-container-2.active {
	display: block;
	background-color: #fff;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 12px;
}

/* FORM CONTENT */
.form-content {
	height: 270px;
	overflow: scroll;
	overflow-x: hidden;
	padding: 10px;
}
.form-content::-webkit-scrollbar{
	background-color: #e4e2e2;
	width: 10px;
}
.form-content::-webkit-scrollbar-thumb {
	background-color: #111111;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(,0,0,0.9);
}

/* LIST */
#list-column {
	height: 300px;
	-webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
	transition: width 1s;
}

/* PANEL 2 */
.panel-2 {
	background-color: #fff;
}
.tab-content {
	margin: 10px 0 20px 0;
}
.tabs li {
	background-color: #bdbdbd;
}
.tabs li:active {
	background-color: #e0e0e0;
}

/* FOOTER */
#footer {
	position:fixed;
	left:0px;
	background-color: #424242;
	color: #fff;
	width:100%;
	height: 32px;
	text-align: center;
	margin: 0 !important;
	bottom: 0 !important;
	padding-top: 5px;
	z-index: 2;
}

/* FORM MOBILE VIEW MAX WIDTH 991PX */
@media (max-width: 991px) {
	.form-content {
		height: 100%;
		padding: 10px;
		overflow: visible;
	}
	#form-filter {
		height: 100%;
		width: 100% !important;
		background-color: #fff;
		margin-bottom: 78px;
	}
	#form-container-2{
		height: 100%;
		overflow: hidden;
		display: none;
		z-index: 10;
		transition: all 0.3s;
		margin: 0 !important;
			padding-left: 5px;
		padding-right: 5px;
	}
	#form-container-2.active {
		height: 100%;
		display: block;
		background-color: #fff;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 8px;
		margin-top: 0 !important;
	}
	.form-row {
		padding: 0 10px 0 10px;;
	}
	.panel-2 {
		height: 20%;
		background-color: #fff;
	}
	.btn-process {
		margin-right: 20px;
	}
	.btn-pending {
		margin-left: 28px;
	}
	.btn-cancel {
		margin-left: 3px;
	}
}

/* FORM MOBILE VIEW MAX WIDTH 767PX */
@media (max-width: 767px) {
	.btn-process {
		margin-top: 12px;
	}
	.text {
		text-align: right;
	}
}

/* LIST CONTAINER */
#list-container table thead tr {
	background: #757575;
	color: #000;
}

/* LIST PANELS (ACCORDION LIST) */
#accordion .list-row {
	margin-bottom: 10px;
}
#accordion .panel.panel-default {
	margin: 0 10px;
}
#accordion .panel.panel-default .panel-heading {
	margin: 0;
	padding-top: 5px;
}
#accordion .panel .panel-heading {
	height: 50px;
	background: #fff;
	border: 1px solid #f1f1f1;
}
#accordion .list-row .panel-heading a.header-po-link {
	font-size: 14px;
 	height: 50px;
}

/* TOPUP PAGE */
#form-container .bs-example ul.nav-tabs {
	background: #fff;
}

/* PROCESSING PAGE */
#prevPoModal ul.nav-tabs {
	background: #fff;
}

/* LOGIN PAGE */
#header .slogan h3 {
	color: #fff;
	margin: 15px 10px;
}
#login-content  {
	transition: all 0.3s;
}
#login-content .login {
	background-color: #068688;
	margin-top: 3px;
}
#login-content  .form-login {
	border-radius: 0 !important;
	width: 300px;
}
#login-content .container {
	padding: 20px;
}
#login-content h1 {
	color: #fff;
	margin: 20px 0;
}
#login-content  .hl {
	padding-left: 15px !important;
}
#login-content  .login-row {
	bottom: 0;
	margin: 20px;
}
#login-content  .login-row:first-child {
	margin-top: 40px;
}
#login-content  .btn-login {
	border-radius: 0 !important;
	width: 100px;
	background-color: #ef7746;
	color: #fff;
}
#login-content  .login-row:last-child {
	margin-top:: 50px;
	margin-bottom: 70px;
}
#login-content .input-group-addon {
	background-color: #fff;
	font-family:Arial, FontAwesome;
}
.text-gray {
	color: #b7b7b7;
}

/* DASHBOARD */
#db-preview-list {
	margin: 15px;
	min-height: 50px;
}
#db-preview-list > .panel-heading {
	background-color: #e0e0e0;
	padding: 10px 20px 5px 20px;
}
#db-preview-list h3 {
	margin-left: 4px;
	font-size: 16px;
}
#db-preview-list .panel-body.panel-overview {
	background-color: #fff;
	padding: 5px;
}
#db-preview-list .panel-overview .panel-body {
	color: #000;
	font-size: 12px;
	padding: 5px 20px;
}
#db-preview-list table thead {
	text-align: center;
	font-size: 13px;
}

/* ORDER */
#accordion.order-list div.order-info-box .panel-body {
	padding: 2px 10px 2px 10px;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"] {
	background: #2b2929; 
	padding: 10px 10px 2px 10px; 
	border-radius: 0 0 5px 5px;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"] > ul.nav-tabs {
	background: #444;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"] > ul.nav-tabs li a {
	color: #fff;
	font-weight: bold;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"] > ul.nav-tabs li.active a {
	color: #222;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"]  >div.tab-content {
	background: #fff;
	margin-top: 0;
	margin-bottom: 5px;
	padding: 10px;
	border-radius: 0 0 5px 5px;
}
#accordion.order-list div.order-info-box .panel-body > [role="tabpanel"]  >div.tab-content table thead th {
	color: #fff;
}

@media (max-width: 767px) {
	#login-content  .login {
		margin: 0 !important;	
	}
	#login-content  .login-row {
		bottom: 0;
		margin: 25px 0 0 0 !important;
	}
}